<template>
	<view class="container">
		<view class="top">
			<view class="bg">
				<image :src="user.avatar | urlFormat" mode="aspectFit"  @click="auth('/pages/my/edit')"></image>
				<text class="btn"  @click="auth('/pages/my/edit')">{{ user.nickname }}</text>
			</view>
		</view>
		<view class="middle">
			<!-- <view class="list">
				<view class="item" @click="auth('/pages/my/history')">
					<view class="left">
						<text class="iconfont icon-jilu"></text>
						<view class="text">收藏</view>
					</view>
					<view class="right">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
			</view> -->
			<view class="list">
				<view class="item" @click="auth('/pages/my/feedback')">
					<view class="left">
						<text class="iconfont icon-fankui-"></text>
						<view class="text">反馈</view>
					</view>
					<view class="right">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				<view class="item" @click="auth('/pages/my/setting')">
					<view class="left">
						<text class="iconfont icon-shezhi"></text>
						<view class="text">设置</view>
					</view>
					<view class="right">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item" @click="navTo('/pages/my/about')">
					<view class="left">
						<text class="iconfont icon-guanyu"></text>
						<view class="text">关于</view>
					</view>
					<view class="right">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="this.$store.getters.login">
			<view class="logout" @click="logout">退出</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				member:{
					nickname:'未登录',
					avatar:'../../static/my/user.png'
				}
			}
		},
		onShow() {
			let that = this;
			// uni.setStorageSync('token','kniM16QeGp1700LOX3Eqfp-EfQuqokpz');
			that.$store.dispatch('profile');
		},
		methods: {
			logout(){ // 注销账号
				let that = this;
				uni.showModal({
					title:'系统提示',
					content:'退出登录',
					confirmText:'确认',
					cancelText:'取消',
					success(res) {
						if(res.confirm){
							that.$store.commit('logout');
							uni.reLaunch({
								url:'/pages/my/my'
							});
						}else{
							uni.hideLoading();
						}
					}
				})
			}
		},
		computed: {
			user() {
				// console.log(this.$store.getters);
				if(this.$store.getters.login){
					return this.$store.getters.user;
				}else{
					return this.member;
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f0f0f0;
	}
	.container{
		.top{
			background-color: #FFFFFF;
			width: 100%;
			height: 300rpx;
			.bg{
				height: 100%;
				background: linear-gradient(90deg,#90a4ae,#ffffff,#90a4ae,#ffffff,#90a4ae);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				image{
					border-radius: 50%;
					padding: 8rpx;
					// background-color: #06bf12;
					// border: 2rpx solid #06bf12;
					text-align: center;
					width: 100rpx;
					height: 100rpx;
				}
				.btn{
					color: #FFFFFF;
					font-size: 40rpx;
					margin-top: 20rpx;
					font-weight: bolder;
				}
			}
		}
		.middle{
			.list{
				margin-top: 20rpx;
				background-color: #FFFFFF;
				// padding: 20rpx;
				.item{
					padding: 30rpx;
					font-size: 15px;
					height: 40rpx;
					line-height: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.text{
							padding-left: 20rpx;
						}
					}
					&:nth-child(n) { // &>view
						// background: red;
						border-top: 5rpx solid #f3f3f3;
					}
				}
			}
		}
		.bottom{
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 30rpx;
			font-size: 20px;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-weight: bold;
		}
	}
</style>
